/*
* 科技有限公司版权所有（）.
* Copyright (c) 2019,  and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author
* @Description  项目 - 加油站管理 - 加油站列表
**/
<template>
  <div class="pr-gas-list">
    <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="110px">
      <el-form-item label="加油站名称：" prop="name">
        <el-input placeholder="加油站名称" v-model="searchForm.name"></el-input>
      </el-form-item>

      <el-form-item label="加油站编号：" prop="number">
        <el-input placeholder="加油站编号" v-model="searchForm.number"></el-input>
      </el-form-item>

      <el-form-item label="状态：" prop="status">
        <el-select clearable placeholder="请选择状态" v-model="searchForm.status">
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="w100" label="省：" prop="province">
        <el-select clearable @change="handleProvinceChange" placeholder="请选择省" v-model="searchForm.province">
          <el-option :key="item.id" :label="item.name" :value="item.provinceId" v-for="item in provinceOptions"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="w100" label="市：" prop="city">
        <el-select clearable @change="handleCityChange" placeholder="请选择市" v-model="searchForm.city">
          <el-option :key="item.id" :label="item.name" :value="item.cityId" v-for="item in cityOptions"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="w100" label="区：" prop="cityProper">
        <el-select clearable placeholder="请选择区" v-model="searchForm.cityProper">
          <el-option :key="item.id" :label="item.name" :value="item.countyId" v-for="item in properOptions"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleSearchClick('search')" size="mini" type="primary">查询</el-button>
        <el-button plain size="mini" @click="handleSearchClick('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div>

      <el-button @click="handleAddClick('add')" size="mini" type="primary">新增</el-button>
      <!-- <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"> -->
      <el-upload :before-upload="beforeAvatarUpload" :http-request="handleHttpClick" :on-success="handleAvatarSuccess" :show-file-list="false" action="" class="upload-demo">
        <el-button size="mini" type="info">导入</el-button>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
      <form action="http://jxjf-gs.com/ccb/petrol/common/export" method="post" class="pr-submit-export">
        <input type="submit" value="导出" />
      </form>
      <!-- <el-button @click="handleSearchClick('export')" size="mini" type="info">导出</el-button> -->

      <el-table :data="tableData" border class="mt10">
        <el-table-column label="加油站名称" prop="petrolStationName" width="180"></el-table-column>
        <el-table-column label="加油站编号" prop="petiolStationId" width="180"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status == '0' ? '停用' : '启用' }}
          </template>
        </el-table-column>

        <el-table-column label="省" prop="province"></el-table-column>
        <el-table-column label="市" prop="city"></el-table-column>
        <el-table-column label="区" prop="cityProper"></el-table-column>
        <el-table-column label="详细地址" prop="address" width="180"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="handleOperaClick(scope.row, 'edit')" size="small" type="text">编辑</el-button>
            <el-button @click.native.prevent="handleOperaClick(scope.row, 'stop')" size="small" type="text">
              {{ scope.row.status == '0' ? '启用' : '停用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page.sync="searchForm.pageNum" :hide-on-single-page="true" :page-size="searchForm.pageSize" :total="total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" layout="total, prev, pager, next">
      </el-pagination>

    </div>
    <!-- 新增 编辑 弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">

      <el-form :model="ruleForm" :rules="rules" label-width="110px" ref="ruleForm">

        <el-form-item label="状态：">
          <el-select placeholder="请选择状态" v-model="ruleForm.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="加油站名称：" prop="petrolStationName">
          <el-input placeholder="请输入加油站名称" v-model="ruleForm.petrolStationName"></el-input>
        </el-form-item>

        <el-form-item label="加油站编号：" prop="petiolStationId">
          <el-input placeholder="请输入加油站编号" v-model="ruleForm.petiolStationId"></el-input>
        </el-form-item>

        <el-form-item label="省：" prop="province">
          <el-input placeholder="请输入省" v-model="ruleForm.province"></el-input>
        </el-form-item>
        <el-form-item label="市：" prop="city">
          <el-input placeholder="请输入市" v-model="ruleForm.city"></el-input>
        </el-form-item>
        <el-form-item label="区：" prop="cityProper">
          <el-input placeholder="请输入区" v-model="ruleForm.cityProper"></el-input>
        </el-form-item>

        <el-form-item label="详细地址：" prop="address">
          <el-input placeholder="请输入详细地址" v-model="ruleForm.address"></el-input>
        </el-form-item>
      </el-form>

      <span class="dialog-footer" slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="handleDetermineClick" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import urls from '@/api/urls'
import { getData, postData } from '@/api/'

export default {
  name: 'gasList',
  props: {},
  components: {},
  data() {
    return {
      total: 0,
      searchForm: { // 查询参数
        name: '',
        city: '', // 市
        cityProper: '', // 区
        number: '', // 加油站编号
        status: '', // 0: 停用、1：启用
        province: '',
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
      },
      tableData: [], // 加油站 列表数据
      ruleForm: { // 新增、编辑参数
        id: '',
        city: '',
        status: '1',
        address: '',
        province: '',
        cityProper: '', // 区域
        petiolStationId: '',
        petrolStationName: '', // 加油站名称
      },
      title: '加油站新增',
      dialogVisible: false, // 新增编辑弹窗
      rules: {
        city: [{ required: true, message: '请输入市', trigger: 'blur' }],
        province: [{ required: true, message: '请输入省', trigger: 'blur' }],
        cityProper: [{ required: true, message: '请输入区', trigger: 'blur' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        petiolStationId: [{ required: true, message: '请输入加油站编号', trigger: 'blur' }],
        petrolStationName: [{ required: true, message: '请输入加油站名称', trigger: 'blur' }]
      },
      uploadFile: {}, // 导入

      cityOptions: [],
      properOptions: [],
      provinceOptions: [],
    }
  },
  watch: {},
  created() {
    this.getProvince() // 省
    this.gasSearch()
  },
  mounted() { },
  methods: {
    /**
     *@Description
     *@Param
     *@Return 加油站 查询 按钮事件监听.
     **/
    handleSearchClick(type) {
      if (type === 'search') {
        this.searchForm.pageNum = 1
        this.gasSearch()
      } else if (type === 'export') {
        postData({}, urls.exportUrl).then(res => {
          console.log('导出', res)
        })
      } else {
        this.searchForm.pageNum = 1
        this.$refs['searchForm'].resetFields();
        this.gasSearch()
      }

    },
    /**
     *@Description
     *@Param
     *@Return 加油站新增 按钮事件监听.
     **/
    handleAddClick(type) {
      if (type === 'add') {
        this.title = '加油站新增'
        this.dialogVisible = true
      } else {
        console.log('导入')
      }
    },
    /**
     *@Description
     *@Param
     *@Return 操作项 - 编辑 按钮事件监听.
     **/
    handleOperaClick(data, type) {
      console.log(data, type)
      this.ruleForm = { ...data }
      if (type === 'edit') {
        this.title = '加油站编辑'
        this.ruleForm.status = this.ruleForm.status.toString()
        this.dialogVisible = true
      } else {
        if (this.ruleForm.status == '0') {
          this.ruleForm.status = '1'
        } else {
          this.ruleForm.status = '0'
        }
        this.gasSave() // 加油站新增、编辑
      }
    },
    /**
     *@Description
     *@Param
     *@Return 新增、编辑 - 弹窗 确定按钮 事件监听.
     **/
    handleDetermineClick() {
      this.$refs.ruleForm.validate(valid => {
        console.log('校验结果-----------', valid)
        if (valid) {
          this.gasSave() // 加油站新增、编辑
        }
      })
    },
    /**
     *@Description
     *@Param
     *@Return 加油站列表 新增、编辑.
     **/
    gasSave() {
      console.log('新增编辑参数----', this.ruleForm)
      postData(this.ruleForm, urls.gasSave).then(res => {
        this.dialogVisible = false
        this.gasSearch() // 新增、编辑成功之后 刷新列表
        this.$message.success('数据更新成功！')
        console.log('data---------------', res)
      })
    },
    /**
     *@Description
     *@Param
     *@Return 加油站列表 查询.
     **/
    gasSearch() {
      console.log('查询参数----', this.searchForm)
      const params = JSON.parse(JSON.stringify(this.searchForm))
      const province = this.provinceOptions.filter(val => { return val.provinceId == this.searchForm.province })[0]
      const city = this.cityOptions.filter(val => { return val.cityId == this.searchForm.city })[0]
      const cityProper = this.properOptions.filter(val => { return val.countyId == this.searchForm.cityProper })[0]
      params.province = province && province.name || ''
      params.city = city && city.name || ''
      params.cityProper = cityProper && cityProper.name || ''

      getData(params, urls.gasSearch).then(res => {
        const data = res.result
        this.tableData = data.data
        this.searchForm.pageNum = data.pageNum
        this.total = data.total
        console.log('加油站列表 查询list---------------', res)
      })
    },
    /**
     *@Description
     *@Param
     *@Return 加油站列表 分页事件.
     **/
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.gasSearch()
      console.log(`当前第几页: ${val}`)
    },
    handleSizeChange(val) {
      console.log(`handleSizeChange: ${val}`)
    },
    /**
     *@Description
     *@Return区域查询 - 省 - 市 - 切换 查询直接下级.
     **/
    handleProvinceChange(e) {
      console.log(e)
      this.getCity(e) // 市
    },
    handleCityChange(e) {
      console.log(e)
      this.getProper(e) // 区
    },
    /**
     *@Description
     *@Return区域查询 - 省 - 市 - 县.
     **/
    getProvince() {
      getData({}, urls.provinceUrl).then(res => {
        this.provinceOptions = res.data
        console.log('省----', res)
      })
    },
    getCity(provinceId) {
      getData({ provinceId }, urls.cityUrl).then(res => {
        this.cityOptions = res.data
        this.searchForm.city = '' // 市
        this.searchForm.cityProper = '' // 区
        console.log('市----', res)
      })
    },
    getProper(cityId) {
      getData({ cityId }, urls.properUrl).then(res => {
        this.properOptions = res.data
        this.searchForm.cityProper = '' // 区
        console.log('区----', res)
      })
    },
    /**
     *@Description
     *@Return区域查询 - 导入相关.
     **/
    beforeAvatarUpload(file) {
      console.log('file, type-------', file)

      const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 'application/vnd.ms-excel'
      if (!isJPG) {
        this.$message.error('导入文件格式只能是excel!')
      }
      if (isJPG) {
        this.uploadFile.file = file  // 得到上传file
      }
      return isJPG
    },
    /**
     *@Description
     *@Return 导入 - 函数.
     **/
    handleHttpClick() {
      let formData = new FormData()
      formData.append('file', this.uploadFile.file)

      postData(formData, urls.excelUploadUrl).then(response => {
        this.$message.success('导入成功！')
        this.gasSearch() // 加油站列表查询
        console.log('导入返回值-----', response)

      }).catch(err => {
        this.$message.warning('导入失败！')
        console.log('导入失败返回值-----', err)
      })
    },
    /**
     *@Description
     *@Return 导入成功 ===== 本次暂未使用到.
     **/
    handleAvatarSuccess(res, file) {
      console.log('上传成功返回值-----', res, file)
    },

    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}

</script>
<style lang="scss" scoped="scoped">
// 查询 区域 label 宽度重置
::v-deep .w100 label {
  width: 90px !important;
}
// 新增 编辑 区域 表单margin 重置
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
// ::v-deep .el-form-item {
//   // margin-bottom: 10px;
// }
// 导入
.upload-demo {
  display: inline-block;
  margin-left: 10px;
}
// element - ui 样式重置
::v-deep .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
::v-deep .el-range-editor.el-input__inner {
  padding: 0 10px !important;
}
::v-deep .el-form-item {
  margin-bottom: 10px !important;
}
::v-deep .el-form--inline .el-form-item__content {
  width: 140px;
}
::v-deep .el-date-editor .el-range-separator {
  padding: 0 10px !important;
}
::v-deep .el-date-editor--daterange.el-input__inner {
  width: 250px !important;
}
// table
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 5px 0 !important;
}
</style>
